// px转换为rem
@function pxToRem($px, $base: 750px) {
    $min: 1 / $base * 10 * 1;
    $result: $px / $base * 10 * 1;

    @if $result < 0.027 and $result > 0 {
        @return 2px;
    }

    @else {
        @return $px / $base * 10 * 1rem;
    }
}

// 设置dpr下的字体大小
@mixin font-dpr($font-size, $line-height: $font-size) {
    font-size: $font-size / 2;

    @if $line-height != none {
        line-height: $line-height / 2;
    }

    [data-dpr="2"] & {
        font-size: $font-size;

        @if $line-height != none {
            line-height: $line-height;
        }
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3 / 2;

        @if $line-height != none {
            line-height: $line-height * 3 / 2;
        }
    }
}

@font-face {
    font-family: 'PingFang Regular';
    src: url('../font/enroll/PingFang Regular.eot');
    src:
      url('../font/enroll/PingFang Regular.eot?#font-spider') format('embedded-opentype'),
      url('../font/enroll/PingFang Regular.woff') format('woff'),
      url('../font/enroll/PingFang Regular.ttf') format('truetype'),
      url('../font/enroll/PingFang Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }

.cheer1-container{
    width: 100%;
    background-image: url('../images/cheer1/cheerBackground.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: 'PingFang Regular';
    padding-top: pxToRem(45px);
    padding-bottom: pxToRem(25px);

    .main{
        width: pxToRem(678px);
        height: pxToRem(1183px);
        background-image: url('../images/cheer1/content.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 auto pxToRem(80px);
        position: relative;

        .main-title{
            @include font-dpr(28px,40px);
            color: #ffffff;
            text-align: center;
            margin: 0 auto;
            position: absolute;
            top: pxToRem(30px);
            left: 0;
            right: 0;
            letter-spacing: pxToRem(-1px);
            font-weight: bold;

            .main-title-number{
                @include font-dpr(40px,40px);
                color: #ea4684;
            }
        }

        .main-header{
            width: pxToRem(534px);
            height: pxToRem(128px);
            background-image: url('../images/cheer1/title.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin: 0 auto;
            position: absolute;
            top: pxToRem(350px);
            left: 0;
            right: 0;

            .head{
                position: absolute;
                width: pxToRem(117px);
                height: pxToRem(117px);
                top: pxToRem(4px);
                left: pxToRem(5px);
                border-radius: 100%;
            }
            .header-word{
                color: #58595b;
                @include font-dpr(32px, 44px);
                font-weight: bold;
                text-align: left;
                margin: pxToRem(16px) 0 0 pxToRem(135px);
                width: pxToRem(450px);

                .header-number{
                    color: #ea4684;
                }
            }
        }

        .main-screen{
            width: pxToRem(561px);
            height: pxToRem(297px);
            margin: 0 auto;
            position: absolute;
            top: pxToRem(550px);
            left: 0;
            right: 0;

            .screen-play{
                width: pxToRem(85px);
                height: pxToRem(85px);
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 999;
                margin: auto;
            }
            .poster-img{
                width: pxToRem(562px);
                height: pxToRem(297px);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 998;
            }
            .screen-video{
                width: pxToRem(560px);
                height: pxToRem(297px);
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .user-head{
            height: pxToRem(50px);
            position: absolute;
            left:pxToRem(210px);
            bottom: pxToRem(270px);
            img{
                width: pxToRem(30px);
                height: pxToRem(30px);
                float: left;
                margin: pxToRem(10px) pxToRem(20px);
            }
            p{
                @include font-dpr(24px, 50px);
                float: right;
                color: #fff;
            }
        }
        .main-heart{
            width: pxToRem(137px);
            height: pxToRem(128px);
            margin: 0 auto;
            position: absolute;
            top: pxToRem(915px);
            left: 0;
            right: 0;
            background-image: url('../images/cheer1/greyHeart.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;

            &.favor{
                background-image: url('../images/cheer1/redHeart.png');
            }
        }

        .main-word{
            width: 100%;
            position: absolute;
            top: pxToRem(1048px);
            text-align: center;
            color: #ffffff;
            @include font-dpr(38px);
            font-weight: bold;
        }
    }

    .invitation{
        width: pxToRem(580px);
        height: pxToRem(110px);
        margin: pxToRem(80px) auto 0;
        background-image: url('../images/cheer1/invitation.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

@media (device-width:320px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/5 */
    .cheer1-container .main .main-title {
        @include font-dpr(25px,35px);
    }
    .cheer1-container .main .main-title .main-title-number{
        @include font-dpr(35px,35px);
    }
}